import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import my from '../views/my.vue'
import myroute from '../views/myroute.vue'
import myasync from '../views/myasync.vue'
import myasync2 from '../views/myasync2.vue'
import Father from '../views/Father.vue'
import test  from '../views/test.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/myasync',
    name: 'myasync',
    component: myasync
  },
  {
    path: '/myasync2',
    name: 'myasync2',
    component: myasync2
  },
  {
    path: '/test',
    name: 'test',
    component: test
  },
  {
    path: '/father',
    name: 'Father',
    component: Father
  },
  {
    path: '/my',
    name: 'my',
    component: my,
    children:[
      {
        path:'route/:id',
        component:myroute
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
